<!DOCTYPE html>  
<html>  
<head>  
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>饶平学校地图</title>  
<style type="text/css">
	html{height:100%;}  
	body{height:100%;margin:0px;padding:0px}  
	*{
		margin:0;
		padding: 0;
	}
	img{
		display: block;
	}
	a{
		text-decoration: none;
	}
	.info{
		width: 320px;
        }
    .left{
    	float: left;
    }
    .right{
            float: right;
        }
	.top{
		height: 30px;
		background: black;
		padding:0px auto;
		color:#FFF;
		font-size: 15px;
	}
	.top a{
		color:#FFF;
	}
	.nav{
		width:1080px;
		margin:0px auto;
		line-height: 30px;
	}
	.nav li{
		float: left;
		margin: 0 5px;
		padding: 0 5px;
		font-weight: 700;
	}
	.nav li a{
		font-size: 16px;
	}
	.userlogin{
		float: right;
	}
	.header{
		height:100px;
		background:#521368;
	}
	.header a{
		color:#BBB;
		font-size: 13px;
	}
	.logo{
		position: relative;
		float:left;
		left:100px;
		height: 100px;
	}
	.main{
		width: 100%;
	}
	#container{
		position: absolute; 
		overflow:hidden;
		margin-left: 320px;
	} 
	.infotitle{
		color: #2d64b3;
		font-weight:800;
	} 
	.info{
		font-size: 13px;
		color:#555;
		line-height: 1.5;
	}

</style>  
<script>


</script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ykkwXpHmPQpxj43ZHTrjz1NRGt6dImyu">
//v2.0版本的引用方式：src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"
//v1.4版本及以前版本的引用方式：src="http://api.map.baidu.com/api?v=1.4&key=您的密钥&callback=initialize"
</script>
</head>  
 
<body>  
	<header>
		<div class="top">
			<div class="nav">欢迎来到小K商城！
				<div class="userlogin">
					<a href="login.html">登录</a>|
					<a href="reg.html">注册</a>
				</div>
			</div>
		</div>
		<div class="header">
			<div class="logo">
				<a href="/">
					<img src="/img/datalogo.png" alt="" />
				</a>
			</div>
		</div>
	</header>
	<div class="main">
		<div id="info" class="left info">
			<h2 class="boxtitle">饶平学校地图</h2>

		</div>
		<div id="container"  class="right" style="height:100%;"></div> 
	</div>
<script type="text/javascript"> 
	document.getElementById('info').style.height=document.body.clientHeight - 130 +'px';
	document.getElementById('container').style.height=document.body.clientHeight - 130 +'px';
	document.getElementById('container').style.width=document.body.offsetWidth - 320 +'px';
	var map = new BMap.Map("container",{enableMapClick : false});          // 创建地图实例  
	var point = new BMap.Point(117.010414,23.670777);    // 创建点坐标  
	map.centerAndZoom(point, 10);                 // 初始化地图，设置中心点坐标和地图级别  
	map.enableScrollWheelZoom();                  // 启用滚轮缩放
	map.enableKeyboard();						  // 启用键盘方向键

	function addMarker(point, id, title, addr, otherinfo){  // 创建图标对象   
		// 创建标注对象并添加到地图   
		var marker = new BMap.Marker(point);    
		map.addOverlay(marker);     
		marker.addEventListener("click", function(e){    
 			var opts = {    
 				width : 250,     // 信息窗口宽度  
 				height: 100,     // 信息窗口高度
 				title : title  // 信息窗口标题   
 			}    
 			var info = "<hr><div class='info'>地址：" + addr + "<br/>" + otherinfo + "<br/><a href='" + id + "'>查看详情</a></div>";
			var infoWindow = new BMap.InfoWindow(info, opts);  // 创建信息窗口对象    
			map.openInfoWindow(infoWindow, point);      // 打开信息窗口  
		}) 
	}    
	// 随机向地图添加10个标注    
	var url='map.php';
	var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if(this.readyState == 4) {
            var list = this.responseText;
            var lati = eval(list);
			for (var i in list) {    
				var point = new BMap.Point(lati[i].lo,lati[i].la);    
				var title = '<h4 class=\'infotitle\'><a href=' + lati[i].id + '>' + lati[i].title + '</a></h4>';
				var addr = lati[i].addr;
				var otherinfo = lati[i].otherinfo
				addMarker(point, i,title,addr,otherinfo);   
			}
        }
    }

    xhr.open('get' , url , true);
    xhr.send(null);


</script>  
</body>  
</html>